<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 这东西就让他这样吧！不想改。。。。。。。。。 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .content {
            /* width: 65%;
            margin: 0 auto; */
            /* background-color: darkmagenta; */
        }

        .header,.logo,.bar {
            font-weight: 800;
        }

        .header {
            width: 100%;
            height: 27px;
            background-color: lightgray;
            display: flex;
        }

        .header .left {
            position: relative;
            left: 10%;
        }

        .header .right{
            position: relative;
            left: 60%;
        }

        .navigation {
            height: 50px;
            display: flex;
        }

        .logo {
            width: 40%;
            display: flex;
        }

        .logo img {
            position: relative;
            left: 146px;
            width: 50px;
        }

        .logo div {
            position: absolute;
            left: 225px;
        }

        .logo div span {
            display: block;
            /* left: 300px; */
        }


        .bar {
            width: 60%;
            background: thistle;
            display: flex;
        }

        .bar {
            padding: 6px;
            text-align: center;
            vertical-align: middle;
            /* line-height: 50px; */
        }
        
        .bar a {
            font-size: 14px;
            text-decoration: none;
            width: 12.5%;
            /* word-break: break-all; */
        }

        .bar a span {
            font-size: 13px;
            display: block;
            /* height: 10px; */
        }

        /* .bar a span::after {
            content: "";
            display: block;
        } */

        .Carousel .radius {
            text-align: center;
        }

        .Carousel .radius a {
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 10px;
            border: none;
            margin: 10px;
            display: inline-block;
            position: relative;
            top: -30px;
        }

        .Carousel .radius a:hover {
            background: steelblue;
        }

        .activity {
            margin-top: 30px;
            margin-left: 10%;
            width: 80%;
            display: flex;
            /* background: teal; */
            /* text-align: center; */
        }

        .activity>div {
            margin: 0 1.66%;
        }

        .activity .blue {
            width: 30%;
            /* background: gainsboro; */
            /* margin: 0 3.33%; */
        }

        .activity .blue .top {
            height: 150px;
            background: url(../大作业1/img//矩形\ 8\ 拷贝\ 2.png);
        }

        .activity .green {
            width: 30%;
            /* background: chartreuse; */
        }

        .activity .green .top {
            height: 150px;
            background: url(../大作业1/img/矩形\ 8.png);
        }

        .activity .violet {
            width: 30%;
            /* background: darkgray; */
        }

        .activity .violet .top {
            height: 150px;
            background: url(../大作业1/img/矩形\ 8\ 拷贝.png);
        }

        .activity .blue .top img,
        .activity .green .top img,
        .activity .violet .top img {
            margin: 0 auto;
            display: block;
        }

        .activity .blue .top span,
        .activity .green .top span,
        .activity .violet .top span {
            margin: 15px ;
            display: block;
            text-align: center;
        }

        .activity .blue .top hr,
        .activity .green .top hr,
        .activity .violet .top hr {
            width: 40%;
            margin-left: 30%;
            margin-top: -10px;
            background: cornsilk;
        }

        .activity .blue .triangle {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: dodgerblue;
            margin: 0 auto;
        }

        .activity .green .triangle {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: darkcyan;
            margin: 0 auto;
        }

        .activity .violet .triangle {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: darkmagenta;
            margin: 0 auto;
        }

        .activity .blue .middle {
            height: 130px;
            display: flex;
        }

        .activity .blue .middle .left {
            width: 50%;
            margin-top: -15px;
            /* margin-left: 15px; */
            text-align: center;
        }

        .activity .blue .middle .right p {
            width: 150px;
            margin: 10px;
        }

        .activity .blue hr {
            width: 90%;
            height: 2px;
            margin-top: 15px;
            margin-left: 5%;
            background: lightblue;
        }

        .activity .green .middle,
        .activity .violet .middle {
            height: 147px;
            text-align: center;
        }

        .activity .green .middle img {
            width: 60%;
        }

        .bottom {
            height: 120px;
        }

        .activity .blue .bottom ul {
            /* width: 90%; */
            /* margin: 10px; */
        }

        .activity .blue .bottom ul li {
            margin-top: 20px;
            margin-left: 25px;
        }

        .activity .green .bottom span {
            text-align: center;
            display: block;
        }

        .activity .green .bottom span:first-of-type {
            font-size: 22px;
            color: dodgerblue;
            margin: 20px;
        }

        .activity .violet .bottom {
            /* padding: 20px 5%; */
        }

        .activity .violet .bottom span {
            display: block;
        }

        .activity .violet .bottom span:first-of-type {
            text-align: left;
        }

        .activity .violet .bottom span:nth-of-type(2) {
            margin: -10px 10%;
        }

        .activity .violet .bottom span:nth-of-type(3) {
            text-align: right;
        }

        .activity .violet .bottom span:nth-of-type(2n+1) {
            font-size: 50px;
        }

        .about {
            width: 100%;
            text-align: center;
        }

        .about hr,.Contact hr {
            width: 16%;
            background: darkgray;
            margin: 20px 42% ;
        }

        .about>span,.Contact>span {
            width: 9%;
            color: darkgray;
            background: white;
            margin: -33px 45.5% 10px;
            display: block;
        }

        .about .content {
            background: url(../大作业1/img/bg_b.png);
            /* text-align: center; */
        }

        .about .content span {
            width: 60%;
            /* height: 80px; */
            margin: 0 20%;
            padding: 30px 0;
            display: block;
            /* text-align: center; */
        }

        .about .content img {
            margin-bottom: 20px;
        }

        .Contact {
            width: 100%;
            text-align: center;
        }

        .Contact .detail {
            background: lightblue;
            padding: 20px 10%;
            display: flex;
        }
        
        .Contact .detail .left {
            width: 45%;
            padding: 0 5%;
        }

        .Contact .detail .left .top {
            display: flex;
        }

        .Contact .detail .left .top .QR {
            width: 120px;
            height: 160px;
            background: url(../大作业1/img/二维码.png) no-repeat 0 0/120px 120px;
        }

        .Contact .detail .left .top .QR div {
            padding-top: 130px;
        }

        .Contact .detail .left .top .QR div span {
            font-size: 12px;
            margin-top: 3px;
            display: block;
        }

        .top .link {
            text-align: left;
            margin-left: 50px;
        }

        .top .link div {
            height: 25px;
            margin: 5px 0;
        }

        .top .link div img {
            width: 20px;
            /* margin: 3px 5px; */
        }

        .top .link div span {
            width: 300px;
            /* margin: -3px 0; */
            line-height: 30px;
            display: inline-block;
        }

        .detail .left .bottom {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .detail .left .bottom img {
            height: 150px;
            width: 450px;
            margin-left: -110px;
        }
        
        .detail .right form {
            /* margin-left: 10px; */
            width: 500px;
            text-align: left;
        }

        .detail .right form span {
            margin: 5px 0;
            display: block;
        }

        .detail .right form input{
            width: 480px;
            height: 35px;
            background: lightgoldenrodyellow;
            border-top: none;
            border-left: none;
            border-bottom: none;
            border-right: 2px solid;
            border-right-color: black;
            border-radius: 5px;
        }

        .detail .right form textarea {
            width: 480px;
            height: 100px;
            background: lightgoldenrodyellow;
            border-top: none;
            border-left: none;
            border-bottom: none;
            border-right: 2px solid;
            border-right-color: black;
            border-radius: 5px;
        }

        .detail .right form input:last-of-type {
            width: 100px;
            height: 35px;
            background: cornflowerblue;
        }

        .footer a {
            color: white;
        }
 
        .footer .follow {
            text-align: center;
            color: white;
            background: steelblue;
        }

        .footer .follow img {
            margin-top: 10px;
            /* padding-top: 10px; */
        }

        .footer .follow img:nth-of-type(2) {
            margin-left: 20px;
        }

        .footer .follow div:nth-of-type(2) {
            /* margin-top: 10px;
            margin-bottom: 10px; */
            padding: 10px 0;
        }

        /* .footer .follow div:nth-of-type(2) a {
            color: white;
        } */

        .copyright {
            background: black;
            text-align: center;
        }

        .copyright span {
            color: white;
            padding: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="left">
                <span>全国服务热线：400-000-000</span>
            </div>
            <div class="right">
                <a href="#new">设置首页</a>
                <a href="#new">加入收藏</a>
            </div>
        </div>
        <div class="subject">
            <div class="navigation">
                <div class="logo">
                    <img src="../大作业1/img/logo.png" alt="logo" width="50px" height="50px">
                    <div>
                        <span>TK科技有限公司</span>
                        <span>cer clcd keo Holdings Co,Ltd</span>
                    </div>
                </div>
                <div class="bar">
                    <a href="../大作业1/首页.html">首页<span>Home</span></a>
                    <a href="../大作业1/产品.html">关于我们<span>About</span></a>
                    <a href="../大作业1/产品详情.html">产品中心<span>Products</span></a>
                    <a href="#">服务支持<span>Service</span></a>
                    <a href="#">新闻中心<span>News</span></a>
                    <a href="#">在线商店<span>Shop</span></a>
                    <a href="#">联系我们<span>Contact Us</span></a>
                </div>
            </div>
            <div class="Carousel">
                <img src="../大作业1/img/banner.jpg" alt="轮播图" width="100%" height="400px">
                <div class="radius">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="activity">
                <div class="blue">
                    <div class="top">
                        <img src="../大作业1/img/icon6.png" alt="" width="50px" height="50px">
                        <span>新闻中心</span>
                        <span>NEWS CENTER</span>
                        <hr>
                    </div>
                    <div class="triangle"></div>
                    <div class="middle">
                        <div class="left">
                            <span>CeBIT 2015</span>
                            <img src="../大作业1/img/pic1.png" alt="" width="120px" height="120px">
                        </div>
                        <div class="right">
                            <p>创新ITC共建全连接世界德国汉诺威展览中心</p>
                            <p>3月16日-20日</p>
                        </div>
                    </div>
                    <hr>
                    <div class="bottom">
                        <ul>
                            <li>上海国际智能建筑展览会</li>
                            <li>2014德国柏林国际消费类电子产品展览会</li>
                            <li>2014中国（贵阳）公告安全防范产品博览会</li>
                        </ul>
                    </div>
                </div>
                <div class="green">
                    <div class="top">
                        <img src="../大作业1/img/icon7.png" alt="">
                        <span>新闻中心</span>
                        <span>NEWS CENTER</span>
                        <hr>
                    </div>
                    <div class="triangle"></div>
                    <div class="middle">
                        <img src="../大作业1/img/pic2.png" alt="">
                    </div>
                    <div class="bottom">
                        <span>s6213w-y</span>
                        <span>海思3518E方案，多码流技术，百万高清</span>
                    </div>
                </div>
                <div class="violet">
                    <div class="top">
                        <img src="../大作业1/img/icon8.png" alt="">
                        <span>新闻中心</span>
                        <span>NEWS CENTER</span>
                        <hr>
                    </div>
                    <div class="triangle"></div>
                    <div class="middle">
                        <img src="../大作业1/img/pic3.png" alt="">
                    </div>
                    <div class="bottom">
                        <span>“</span>
                        <span>"siepem"品牌是广州市TK科技有限公司推出的自有品牌</span>
                        <span>”</span>
                    </div>
                </div>
            </div>
            <div class="about">
                <h3>关于我们</h3>
                <hr>
                <span>STORE DISPLAY</span>
                <div class="content">
                    <span>广州市TK科技有限公司是领先的监控产品供应商和解决
                        方案服务商，面向全球提供领先的网络视频监控系列产品
                        及专业的行业。广州市TK科技有限公司是领先的监控产品
                        供应商和解决方案服务商，面向全球提供领先的网络视频
                        监控系列产品及专业的行业。</span>
                    <img src="../大作业1/img/走马灯.png" alt="">
                </div>
            </div>
            <div class="Contact">
                <h3>联系我们</h3>
                <hr>
                <span>STORE DISPLAY</span>
                <div class="detail">
                    <div class="left">
                        <div class="top">
                            <div class="QR">
                                <div>
                                   <span>微信扫一扫</span>
                                   <span>关注我们相关的信息</span> 
                                </div>
                            </div>
                            <div class="link">
                                <div>
                                    <img src="../大作业1/img/icon_03_jfyz.png" alt="">
                                    <span>服务热线：400-000-0000</span>
                                </div>
                                <div>
                                    <img src="../大作业1/img/icon_07_jrby.png" alt="">
                                    <span>联系人：某先生</span>
                                </div>
                                <div>
                                    <img src="../大作业1/img/icon_09_d1er.png" alt="">
                                    <span>公司邮箱：www.tk.com</span>
                                </div>
                                <div>
                                    <img src="../大作业1/img/icon_12_dj3s.png" alt="">
                                    <span>公司传真：000-12345678</span>
                                </div>
                                <div>
                                    <img src="../大作业1/img/icon_15_0nnk.png" alt="">
                                    <span>邮政编码：467000</span>
                                </div>
                                <div>
                                    <img src="../大作业1/img/icon_19_9xlt.png" alt="">
                                    <span>公司地址：广州市某某区某路某号</span>
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <img src="../大作业1/img/地图.png" alt="">
                        </div>
                    </div>
                    <div class="right">
                        <form>
                            <span>昵称</span> 
                            <input type="text">
                            <span>联系电话</span>
                            <input type="tell">
                            <span>电子邮箱</span>
                            <input type="email" name="" id="">
                            <span>内容</span>
                            <textarea name="" id="" cols="30" rows="5"></textarea>
                            <input type="submit" value="提交">
                        </form>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="follow">
                    <div>
                        <span>关注我们：</span>
                        <img src="../大作业1/img/图层 83.png" alt="">
                        <img src="../大作业1/img/矢量智能对象.png" alt="">
                    </div>
                    <div>
                        <a href="#new">网站首页</a>
                        <a href="#new">新闻动态</a>
                        <a href="#new">关于我们</a>
                        <a href="#new">团队风采</a>
                        <a href="#new">联系我们</a>
                        <a href="#new">在线留言</a>
                    </div>
                </div>
                <div class="copyright">
                    <span> ©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>